/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */
async function getChannelList() {
  // 1.2 获取文章列表数据
  const result = await axios({ url: '/v1_0/channels' })
  console.log(result);
  // 将数据渲染到列表
  const htmlStr = '<option selected="">请选择文章频道</option>' +
    result.data.channels.map(item => {
      return `<option value="${item.id}">${item.name}</option>`
    }).join('')
  // 1.3 展示到指定的标签结构中
  document.querySelector('.form-select').innerHTML = htmlStr
  // console.log(htmlStr);
}
getChannelList()
/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormData
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */
document.querySelector('.img-file').addEventListener('change', async e => {
  console.log(e.target.files[0]);
  const fd = new FormData()
  fd.append('image', e.target.files[0])
  const result = await axios({ url: '/v1_0/upload', data: fd, method: 'post' })
  console.log(result);
  document.querySelector('.rounded').src = result.data.url
  document.querySelector('.place').classList.add('hide')
  document.querySelector('.rounded').classList.add('show')
})
// 用户点击图片可以更改图片
// 点击图片，使用js方法，给label触发点击
document.querySelector('.rounded ').addEventListener('click', e => {
  document.querySelector('.img-file').click()
})
/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
document.querySelector('.send').addEventListener('click', async e => {
  //  5.1 判断按钮文字，区分业务（因为共用一套表单）
  if (e.target.innerHTML !== '发布') return
  // 3.1 基于 form-serialize 插件收集表单数据对象
  const form = document.querySelector('.art-form')
  const data = serialize(form, { hash: true, empty: true })
  // id暂时用不到，删了
  delete (data.id)
  // 给data添加图片的地址
  data.cover = {
    type: 1,
    images: [document.querySelector('.rounded').src]
  }
  console.log(data);
  // 3.2 基于 axios 提交到服务器保存
  try {
    const result = await axios({
      url: '/v1_0/mp/articles',
      method: 'post',
      data
    })
    // console.log(result);
    // 3.3 调用 Alert 警告框反馈结果给用户
    myAlert(true, '发布成功')
    // 3.4 重置表单并跳转到列表页
    form.reset()
    // 重置封面和富文本编辑器
    document.querySelector('.place').classList.remove('hide')
    document.querySelector('.rounded').classList.remove('show')
    editor.clear()
    // 延迟1.5s后跳转
    setTimeout(() => {
      location.href = '../content/index.html'
    }, 1500);
  } catch (error) {
    myAlert(false, error.response.data.message)
    // console.dir(error);
  }
})


  /**
   * 目标4：编辑-回显文章
   *  4.1 页面跳转传参（URL 查询参数方式）
   *  4.2 发布文章页面接收参数判断（共用同一套表单）
   *  4.3 修改标题和按钮文字
   *  4.4 获取文章详情数据并回显表单
   */
  ; (function () {
    // 打印上方网址？后的参数
    // console.log(location.search);
    //  4.2 发布文章页面接收参数判断（共用同一套表单）
    const paramsStr = location.search
    // 转化参数
    const params = new URLSearchParams(paramsStr)
    // console.log(params.toString())  //id=eb00700c-af83-427f-a617-679352fba275
    //  new URLSearchParams（）的对象是以 value，key的形式存储
    // 遍历params对象
    params.forEach((value, key) => {
      // console.log(value, key);  //eb00700c-af83-427f-a617-679352fba275 id
      // 4.3 修改标题和按钮文字
      if (key === 'id') {
        // 1. 给隐藏输入框赋值（关键：让表单持有 id）
        document.querySelector('[name=id]').value = value
        document.querySelector('.title span').innerHTML = '修改文章'
        document.querySelector('.send').innerHTML = '修改'
        // 4.4 获取文章详情数据并回显表单
        // 请求数据
        axios({
          url: `/v1_0/mp/articles/${value}`
        }).then(result => {
          console.log(result);
          // 自己定义对象（除去不需要的返回参数），方便渲染
          const dataObj = {
            channel_id: result.data.channel_id,
            content: result.data.content,
            title: result.data.title,
            images: result.data.cover.images[0]
          }
          // 遍历dataobj的属性名，渲染页面
          Object.keys(dataObj).forEach(key => {
            // 渲染数据（特殊的照片渲染）
            if (key === 'images') {
              // 如果有封面
              document.querySelector('.rounded').src = dataObj.images
              document.querySelector('.rounded').classList.add('show')
              document.querySelector('.place').classList.add('hide')
            } else if (key === 'content') {
              editor.setHtml(dataObj.content)
            } else {
              // 把标签name属性作为寻找来赋值
              document.querySelector(`[name=${key}]`).value = dataObj[key]
            }
          })

        })
      }
    })
  })()

/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */
//  5.1 判断按钮文字，区分业务（因为共用一套表单）
document.querySelector('.send').addEventListener('click', async e => {
  if (e.target.innerHTML !== '修改') return
  // 获取表单数据
  const form = document.querySelector('.art-form')
  const dataList = serialize(form, { hash: true, empty: true })
  // console.log(dataList);
  try {
    // 5.2 调用编辑文章接口，保存信息到服务器
    const result = await axios({
      url: `/v1_0/mp/articles/${dataList.id}`,
      method: 'put',
      data: {
        ...dataList,
        cover: {
          type: document.querySelector('.rounded').src ? 1 : 0,
          images: [document.querySelector('.rounded').src]
        }
      }
    })
    // console.log(result);
    myAlert(true, '修改成功')
    setTimeout(() => {
      location.href = '../content/index.html'
    }, 1500);
  } catch (error) {
    // console.dir(error)
    myAlert(false, error.response.data.message)
  }
})


